import { createApp, ref } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// import { MotionPlugin } from '@vueuse/motion'

import App from './App.vue'
import router from './router'
import store from './store'
import { watch } from 'vue'

// 导入扩展错误处理工具
import { suppressExtensionErrors, cleanExtensionErrors } from '@/utils/extensionErrorHandler'
import '@/utils/completeErrorSuppressor'

// 立即屏蔽浏览器扩展错误
suppressExtensionErrors()

// 添加错误处理和调试信息
console.log('🚀 开始加载Vue应用...')
console.log('🛡️ 已启用浏览器扩展错误屏蔽')

// 安全导入主题系统
let useTheme
try {
  const themeModule = await import('@/composables/useTheme')
  useTheme = themeModule.useTheme
  console.log('✅ 主题系统加载成功')
} catch (error) {
  console.error('❌ 主题系统加载失败:', error)
  // 提供降级方案
  useTheme = () => ({
    themeVariables: ref({})
  })
}

// 引入暗黑模式样式
import '@/styles/dark-mode.css'
// 引入Inter字体系统
import '@/styles/inter-fonts.css'

// 创建Vue应用实例
const app = createApp(App)

// 添加全局错误处理
app.config.errorHandler = (error, instance, info) => {
  console.error('❌ Vue应用错误:', error, info)
  console.error('错误详情:', {
    error: error.message,
    stack: error.stack,
    info: info
  })
}

// 添加全局警告处理
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('⚠️ Vue警告:', msg, trace)
}

// FOUC根除：应用就绪标记 - 告知index.html脚本Vue应用已准备就绪
if (typeof document !== 'undefined') {
  document.documentElement.classList.add('app-ready')
  console.log('✅ DOM就绪标记已添加')
}

// 安全初始化主题系统
let themeVariables = ref({})
try {
  const theme = useTheme()
  themeVariables = theme.themeVariables || ref({})
  console.log('✅ 主题系统初始化成功')
} catch (error) {
  console.error('❌ 主题系统初始化失败:', error)
}

// 监听主题变化，应用CSS变量 - 确保与index.html预加载的主题同步
watch(themeVariables, (variables) => {
  if (typeof document !== 'undefined') {
    const root = document.documentElement
    Object.entries(variables).forEach(([key, value]) => {
      root.style.setProperty(key, value)
    })
  }
}, { deep: true, immediate: true })

// 注册Element Plus图标
try {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  console.log('✅ Element Plus图标注册成功')
} catch (error) {
  console.error('❌ Element Plus图标注册失败:', error)
}

// 安全安装插件
try {
  app.use(store)
  console.log('✅ Vuex store安装成功')
} catch (error) {
  console.error('❌ Vuex store安装失败:', error)
}

try {
  app.use(router)
  console.log('✅ Vue Router安装成功')
} catch (error) {
  console.error('❌ Vue Router安装失败:', error)
}

try {
  app.use(ElementPlus, {
    locale: zhCn,
  })
  console.log('✅ Element Plus安装成功')
} catch (error) {
  console.error('❌ Element Plus安装失败:', error)
}

// Motion插件临时禁用以修复错误
// app.use(MotionPlugin, {
//   directives: {
//     'motion-slide-visible': {
//       initial: { opacity: 0, y: 50 },
//       visibleOnce: { opacity: 1, y: 0, transition: { duration: 600, type: 'spring' } },
//     },
//     'motion-fade-visible': {
//       initial: { opacity: 0 },
//       visibleOnce: { opacity: 1, transition: { duration: 400 } },
//     },
//     'motion-scale-visible': {
//       initial: { scale: 0.8, opacity: 0 },
//       visibleOnce: { scale: 1, opacity: 1, transition: { duration: 500, type: 'spring' } },
//     }
//   }
// })

// 挂载Vue应用并添加错误处理
try {
  console.log('🚀 开始挂载Vue应用到 #app...')
  const vm = app.mount('#app')
  console.log('✅ Vue应用挂载成功!', vm)

  // 添加挂载成功的标识
  if (typeof document !== 'undefined') {
    document.documentElement.setAttribute('data-vue-mounted', 'true')
    console.log('✅ Vue挂载标记已设置')
  }

  // 清理浏览器扩展错误日志
  cleanExtensionErrors()
} catch (error) {
  console.error('❌ Vue应用挂载失败:', error)
  console.error('挂载失败详情:', {
    error: error.message,
    stack: error.stack
  })

  // 显示错误信息给用户
  if (typeof document !== 'undefined') {
    const appElement = document.getElementById('app')
    if (appElement) {
      appElement.innerHTML = `
        <div style="padding: 20px; text-align: center; color: #ff4444;">
          <h2>❌ 应用启动失败</h2>
          <p>错误信息: ${error.message}</p>
          <p>请检查浏览器控制台获取更多详细信息</p>
        </div>
      `
      document.documentElement.setAttribute('data-vue-error', 'true')
    }
  }
}